<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <!-- 收货地址 -->
    <van-contact-card type="edit" :name="`${address.consignee} ${address.region_text}`" :tel="address.mobile"
        v-if="address" :editable="false" />

    <!-- 商品卡片 -->
    <van-card v-for="(item, key) in product" :key="key" :price="item.total" :title="item.products.name"
        :thumb="item.products.thumbs_text" :num="item.pronum" @click-thumb="toProductInfo(item.proid)">
        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.attrs">
            <van-tag v-for="(value, index) in item.attrs" :key="index" type="primary">{{
                value.value }}</van-tag>
        </template>

        <template #desc v-else>
            <van-tag type="danger">无规格商品</van-tag>
        </template>
    </van-card>

    <!-- 订单信息 -->
    <van-cell title="订单号" :value="order.code" />
    <van-cell title="订单总价" :value="`￥${order.amount}`" />
    <van-cell title="支付方式" :value="order.pay_text" />
    <van-cell title="订单状态" :value="order.status_text" />
    <van-cell title="优惠金额" :value="order.coupon_amount" />
    <van-cell title="下单时间" :value="order.createtime_text" />
    <van-cell title="订单描述" :value="order.remark" />

    <!-- 操作按钮组 -->
    <div class="actions">
        <van-button square hairline type="primary" size="large">在线客服</van-button>

        <!-- status = 1 仅退款 -->
        <van-button square hairline type="danger" size="large" v-if="order.status == '1'">申请退款</van-button>
        <!-- status = -1 -->
        <van-button square hairline type="danger" size="large" v-if="order.status == '-1'">待退款...</van-button>
        <!-- status = 2 -->
        <van-button square hairline type="success" size="large" v-if="order.status == '2'">确认收货</van-button>
        <!-- status = 2 -->
        <van-button square hairline type="warning" size="large" v-if="order.status == '2'">物流详情</van-button>
        <!-- status = 2 退货退款 -->
        <van-button square hairline type="danger" size="large" v-if="order.status == '2'">申请退货退款</van-button>
        <!-- status = -2 -->
        <van-button square hairline type="danger" size="large" v-if="order.status == '-2'">待商家审核...</van-button>
        <!-- status = -3 -->
        <van-button square hairline type="success" size="large" v-if="order.status == '-3'">填写退货信息</van-button>
        <!-- status = 3 已收货 -->
        <van-button type="warning" size="large" v-if="order.status == '3'">立即评价</van-button>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onBeforeMount } from 'vue'

const { proxy } = getCurrentInstance()

let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
let product = ref([])
let address = ref(null)
let order = ref({})

onBeforeMount(() => {
    OrderData()
})

const OrderData = async () => {
    var params = {
        orderid: orderid,
        busid: proxy.$business.value.id
    }

    var result = await proxy.$POST({
        url: '/order/info',
        params
    })

    if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
    }

    address.value = result.data.address
    order.value = result.data.order

    if (result.data.product) {
        result.data.product.map(item => item.attrs = JSON.parse(item.attrs))
    }

    product.value = result.data.product

    // console.log(result.data.order)
}

//跳转到商品详情界面
const toProductInfo = pid => proxy.$router.push({ path: '/product/info', query: { pid } })

</script>

<style scoped>
:deep(.cart) {
    display: flex;
    width: 100%;
}

::v-deep .van-swipe-cell {
    width: 100%;
}

.van-card {
    background-color: transparent;
}

.delete-button {
    height: 100%;
}

.van-tag {
    margin-right: 5px;
}

.actions {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}
</style>